<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
    \"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
<title>YouTube SelectBox Test</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("swfobject", "2.1");</script>
<script type="text/javascript">
// ★ セレクトボックスによる曲の選択
function loadPlayer() {
videoID = "INTOx7QW974"; // ★ 動画の初期表示
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
"&enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer", "230", "180", "8", null, null, params, atts);// 横230px 高さ180px
}
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}
function loadVideo() {
var selectBox = document.getElementById("videoSelection");
var videoID = selectBox.options[selectBox.selectedIndex].value
if(videoID != "none"){
if(ytplayer) {
ytplayer.setVolume(10);// ★ 音量をセットします
ytplayer.loadVideoById(videoID);
}}}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
}
loadPlayer();
</script>
<style type="text/css">
#videoTitle{/* Select BGM */
font-size:12px;
line-height:20px;
}
#videoSelection{/* 選曲Box */
border:1px solid #000000;
padding:3px;
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
}
#YouTubeSelectbox{/* 全体 */
border:1px solid #000000;
width:230px;
padding:10px;;
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
}
#myytplayer{/* 動画部分 */
margin:auto;
width:230px;
}
</style>
</head>

<body>
<div id="YouTubeSelectbox">
<div id="ytapiplayer"></div>
<div id="videoselect">
<div id="videoTitle">Select BGM</div>
<select id="videoSelection" onchange="loadVideo();" style="background-color:#ffffff;color:#000000;">
<option value="none" style="background-color:#ffffff;color:#000000;">♪選曲♪</option>
<option value="INTOx7QW974" style="background-color:#ffffff;color:#000000;">独り言花　　/　LUHICA</option>
<option value="dqTeJMmQFF4" style="background-color:#ffffff;color:#000000;">月のしずく　/　柴咲コウ</option>
<option value="F6L_DyAw4XA" style="background-color:#ffffff;color:#000000;">ひだまりの詩/　Le Couple、ル・クプル</option>
<option value="SV2wUu0Nnbk" style="background-color:#ffffff;color:#000000;">サボテンの花/　チューリップ</option>
</select>
</div>
</div>


</body>
</html>

